<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script>
        //
    </script>
</head>
<body>
    <div class="one">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <h1>hello</h1>
    <h3>删除</h3>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
    <script>
        //first last eq filter
        //parent children next prev siblings
        //end回退原始状态
        $("li").html(1).first().css({
            border: "1px solid red" ,
            backgroundColor :"pink"
        }).parent().css({
            border: "1px solid blue" ,
            listStyle:"none"
        }).next().css({
            border: "1px solid yellow",
            listStyle:"none" 
        }).children().last().css({
            border: "1px solid green" 
        }).end().css('background-color',"lemonchiffon")
        //$(选择器).append("标签") 插入选择器内部末尾
        $(".one").append("<p>哈哈</p>");
        //$(选择器).prepend("标签") 插入选择器内部开头
        $(".one").prepend("<p>哈哈</p>");
        //$("标签").appendTo(选择器) 插入选择器内部末尾
        $("<p>嘻嘻</p>").appendTo(".one")
        //$("标签").prependTo(选择器) 插入选择器内部开头
        $("<p>嘻嘻</p>").prependTo(".one")
        //插入的标签也可以是已有的，标签用$(选择器)代替
        $(".one").prepend($("h1"));
        //$("标签").insertAfter(选择器) 插入选择器之后
        $("<p>xxxx</p>").insertAfter("ul");
        //$(选择器).after() 插入选择器之后
        $("ul").before("<p>yyyy</p>");
        //元素包裹 wrap wrapInner wrapAll
        $("p").wrap("<div>");
        $("p").wrapInner("<i>");
        // $("ul").wrapAll("<section>");
        //元素删除 remove删除元素本身 empty删除内部内容
        // $("h3").remove();
        $("h3").empty();
    </script>
</body>
</html>